<template>
  <div class="gasoline">
    <header-tab></header-tab>

    <!--v-if="user&&(user.vipStage==2||user.vipStage==4)"-->
    <div class="content">
      <button class="button_show"><router-link to="gasoline">返回</router-link></button>
      <table>
        <thead>
        <tr>
          <th v-for="field in fields" :key="field.name">{{ field.label }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in data.list" :key="item.id">
          <td v-for="field in fields" :key="field.name" style="padding:0 2px;">
            <input
                type="text"
                :style="{
              width:field.name=='phone'?'85px':'60px',
            }"
                :class="field.name"
                v-if="field.editable"
                v-model="item[field.name]"
                :placeholder="field.label"
            />
            <select v-else-if="field.selected" v-model="item[field.name]" style="width: 85px">
              <option disabled value="">请选择</option>
              <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
            </select>
            <select v-else-if="field.selected2" v-model="item[field.name]" style="width: 85px">
              <option disabled value="">请选择</option>
              <option v-for="option in enterNames" :key="option.value" :value="option.value">{{ option.label }}</option>
            </select>
            <span v-else>{{ item[field.name] }}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[30]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>

<script default>
import {gasolineVip1List} from '@/api/VipStage'
import HeaderTab from "@/components/HeaderTab"
import {getInfo} from "@/api/login";
import gasoline from "@/views/gasoline/Gasoline.vue";
import user from "@/store/setter";

export default {
  name: 'gasoline',
  computed: {
    gasoline() {
      return gasoline
    }
  },
  components: {
    HeaderTab
  },
  data() {
    //todo 原料卖家，原料买家
    return {
      data: [],
      types: [
        {value: '1', label: '厂家可卖'},
        {value: '2', label: '厂家不卖'},
        {value: '3', label: '贸易商'}
      ],
      enterNames: [
        {value: '1', label: '原料卖家'},
        {value: '2', label: '原料买家'}
      ],
      fields: [
        // {name: 'loginName', label: '序号', editable: false},
        {name: 'province', label: '原料来源(省)', editable: false,},
        {name: 'city', label: '原料来源(市)', editable: false,},
        {name: 'bussiness', label: '原料卖家', editable: false},
        {name: 'type', label: '卖家属性', selected: false, options: false},
        {name: 'gasolineName', label: '原料名称', editable: false},
        {name: 'number', label: '可供量', editable: false},
        {name: 'price', label: '价格', editable: false},
        {name: 'density', label: '密度', editable: false},
        {name: 'studyOctane', label: '研究法辛烷值', editable: false},
        {name: 'motorOctane', label: '马达法辛烷值', editable: false},
        {name: 'olefins', label: '烯烃', editable: false},
        {name: 'aromatic', label: '芳烃', editable: false},
        {name: 'sulphur', label: '硫含量', editable: false},
        {name: 'steams', label: '蒸汽压', editable: false},
        {name: 'oxidation', label: '氧含量', editable: false},
        {name: 'benzene', label: '苯', editable: false},
        {name: 'littleRange', label: '10%馏程', editable: false},
        {name: 'halfRange', label: '50%馏程', editable: false},
        {name: 'mostRange', label: '90%馏程', editable: false},
        {name: 'allRange', label: '终馏点', editable: false},
        {name: 'enterName', label: '数据来源', selected2: false},
        {name: 'phone', label: '联系方式', editable: false},
        {name: 'updateDate', label: '更新时间', editable: false},
      ],
      item: {
        pageNum: 1,
        pageSize: 30,
        total: 0
      },
      user: ""
    }
  }
  ,
  created() {
    this.fechtData();
    this.showUser()
  }
  ,
  methods: {
    showUser() {
      getInfo().then((res) => {
        this.user = res.data.user
      })
    },
    loading() {
      alert("敬请期待")
    }
    ,
    handleSizeChange(val) {
      this.item.pageSize = val;
      this.fechtData();
    }
    ,
    handleCurrentChange(val) {
      this.item.pageNum = val;
      this.fechtData();
    }
    ,
    fechtData() {
      gasolineVip1List(this.item).then((res) => {
          this.data = res.data.gasolineVip1List;
        }).catch((error) => {
          alert("请检查网络")
        })
    }
  }
}
</script>

<style scoped>

.gasoline {
  width: 100%;
  overflow: hidden;
}

.content {
  margin: 0px;
  padding: 0px;
  overflow: auto;
}

.content table {
  width: 100%;
  border-collapse: collapse;
}

.content table tr {
  width: 10px;
}

.content table th, table td {
  height: 20px;
  border: 1px solid #e6e6e6;
  padding: 5px;
  text-align: center;
  font-size: 12px;
  color: #000000;
  font-weight: normal;
}

.content table input {
  width: 55px;
  text-align: center;
  border: #e9e9e9 1px solid;
}

table tbody tr td:nth-child(21) input[type="text"] {
  width: 100px; /* 或者你想要的任何宽度 */
}

table tbody tr td:nth-child(0) {
  width: 50px; /* 或者你想要的任何宽度 */
}

table tbody tr td:nth-child(2) input[type="text"] {
  width: 70px; /* 或者你想要的任何宽度 */
}

.content table button {
  border: none;
  background-color: white;
}

.button_show {
  background-color: #409EFF;
  border: none;
  width: 80px;
  height: 30px;
  margin-bottom: 10px;
  margin-left: 15px;
  border-radius: 5px;
}
.button_show a{
  color: white;
  text-decoration: none;
}

button:focus {
  outline: none;
  box-shadow: none;
}

span {
  margin-left: 10px;
}
</style>
